<template>
	<el-row>
		<el-col :span="24">
			<div>
				<div id="all">
					<el-input size="mini" v-model="input" placeholder="请输入输入角色名称" clearable @clear="roleManagement()"></el-input>
					<el-button size="mini" type="primary" icon="el-icon-search" class="search" @click="roleManagement()">搜索
					</el-button>
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">添加</el-button>
				</div>

				<el-table :data="tableData" border style="width: 100%;">
					<el-table-column prop="name" sortable label="角色名称">
					</el-table-column>
					<el-table-column prop="desc" label="说明">
					</el-table-column>
					<el-table-column prop="operation" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
							</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
							<el-button size="mini" type="primary" @click="authorization(scope.$index, scope.row)">授权
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- //分页 -->
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
						:current-page="ljq.page" :page-sizes="[5, 10, 15, 20]" :page-size="ljq.num"
						layout="total, sizes, prev, pager, next, jumper" :total="ljq.total">
					</el-pagination>
				</div>

				<!-- //弹框 添加 -->
				<el-dialog title="创建" :visible.sync="dialogFormVisible">
					<el-form :model="form" :rules="rules" ref="formm">
						<el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
							<el-input v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="说明" :label-width="formLabelWidth" prop="desc">
							<el-input v-model="form.desc" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="addTo()">确 定</el-button>
					</div>
				</el-dialog>

				<!-- //编辑 -->
				<el-dialog title="编辑" :visible.sync="dialogFormVisibles">
					<el-form :model="formEdit">
						<el-form-item label="角色名称" :label-width="formLabelWidth">
							<el-input v-model="formEdit.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="说明" :label-width="formLabelWidth">
							<el-input v-model="formEdit.desc" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisibles = false">取 消</el-button>
						<el-button type="primary" @click="edit();dialogFormVisibles = false">确 定</el-button>
					</div>
				</el-dialog>

				<!-- //授权 -->
				<el-dialog title="授权" :visible.sync="dialogFormVisibless">
					<el-tree :data="tableDatas" show-checkbox node-key="id" :default-checked-keys="assignedPermissions"
						@check="getCheckedKeys()" :props="defaultProps" ref="tree">
						<span slot-scope="{ node, data }">
							<span>{{node.label}}</span>
							<span class="span" v-if="data.api">{{data.api}}</span>
						</span>
					</el-tree>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisibless = false">取 消</el-button>
						<el-button type="primary" @click="grant();dialogFormVisibless = false">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		list,
		create,
		update,
		permissions,
		delet,
		rolepermissions
	} from '../../utils/axios.js'
	export default {
		data() {
			return {
				//不能为空
				rules: {
					name: [{
						required: true, //必填
						message: "角色不能为空",
						trigger: 'blur' //离开
					}],
					desc: [{
						required: false, //可以为空
					}]
				},

				//分页
				ljq: {
					page: 1,
					num: 20,
					total: 0

				},

				input: '',
				tableData: [],

				//授权
				assignedPermissions: [],
				id: 0,
				permissions: [],
				tableDatas: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},

				//弹框
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogTableVisibles: false,
				dialogFormVisibles: false,
				dialogTableVisibless: false,
				dialogFormVisibless: false,
				dialogTableVisiblesss: false,
				dialogFormVisiblesss: false,
				form: {
					name: '',
					desc: ''
				},
				formEdit: {
					name: '',
					desc: '',
					id: ''
				},
				formLabelWidth: '120px'
			}
		},
		created() {
			this.roleManagement()
		},
		methods: {
			//数据渲染
			//列表
			roleManagement() {
				list(this.input, this.ljq.page, this.ljq.num).then(res => {
					console.log(res)
					this.ljq.total = res.data.data.total
					this.tableData = res.data.data.list
				})
			},

			//分页
			handleSizeChange(newnum) {
				console.log(newnum)
				this.ljq.num = newnum
				this.roleManagement()
			},
			handleCurrentChange(newpage) {
				this.ljq.page = newpage
				this.roleManagement()
			},




			//删除
			handleDelete(index, row) {
				let data = {
					id: row.id,
					name: row.name,
					desc: row.desc
				}
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delet(data).then(res => {
						this.$notify({
							title: '成功',
							message: '删除管理员成功',
							type: 'success'
						});
						this.roleManagement()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//添加
			addTo() {
				// ref="ruleForm"
				let data = {
					name: this.form.name,
					desc: this.form.desc,
				}
				this.$refs.formm.validate((valid) => {
					if (valid) {
						if (this.form.name == 111) {
							this.$alert('系统内部错误，请联系管理员维护', '错误', {
								confirmButtonText: '确定',
								type: 'warning'
							})
							return
						}
						create(data).then(res => {
							// console.log(12312313213)
							this.$notify({
								title: '成功',
								message: '添加管理员成功',
								type: 'success',
							});

							this.dialogFormVisible = false,
								this.roleManagement()
							this.form.name = ''
							this.form.desc = ''
						})
					} else {
						console.log('失败');
						return false;
					}
				});
			},



			//编辑
			edit() {
				let data = {
					id: this.formEdit.id,
					name: this.formEdit.name,
					desc: this.formEdit.desc
				}
				update(data).then(res => {
					this.$notify({
						title: '成功',
						message: '更新管理员成功',
						type: 'success'
					});
					this.roleManagement()
				})
			},
			handleEdit(index, row) {
				// console.log(row.id);
				this.dialogFormVisibles = true;
				// console.log(row,987531563213)
				this.formEdit.id = row.id
				this.formEdit.name = row.name
				this.formEdit.desc = row.desc
			},



			//授权
			authorization(index, row) {
				// sessionStorage.setItem('serrs',row.id)
				// ?roleId=${this.id}
				this.id = row.id
				let data = {
					roleId: this.id
				}
				// console.log(index, row, 789789);
				this.dialogFormVisibless = true;
				permissions(data).then(res => {
					// console.log(res, 78978879879789989879)
					this.tableDatas = res.data.data.systemPermissions
					this.assignedPermissions = res.data.data.assignedPermissions
				})
			},


			getCheckedKeys() { //点击选中触发
				// console.log(this.$refs.tree.getCheckedKeys(),98777777777777777777)
				this.permissions = this.$refs.tree.getCheckedKeys()
			},

			grant() { //配置
				let data = {
					roleId: this.id,
					permissions: this.permissions
				}
				// let serr = sessionStorage.getItem('serrs')
				// console.log(this.id, 12312313131213)
				rolepermissions(data).then(res => {
					this.$notify({
						title: '成功',
						message: '授权成功',
						type: 'success'
					});
					this.roleManagement()
				})
			},
		}
	}
</script>


<style lang="less">

</style>

<style>
	#all {
		display: flex;
		width: 30% !important;
		margin-bottom: 10px !important;
	}

	.search {
		margin-left: 5px !important;
	}


	#all .el-input .el-input__inner {
		background-color: #FFFFFF !important;
		padding-left: 5px !important;
		caret-color: #434343 !important;
		color: #999999 !important;
		border: 1px solid #b9b9b9 !important;
	}

	.cell {
		text-align: center !important;
	}

	.block {
		margin-top: 10px !important;
	}

	.block .el-input__inner {
		background-color: #FFFFFF !important;
		border: 1px solid #CCC !important;
		color: #7f7f7f !important;
		padding: 0px !important;
		text-align: center !important;
	}

	.el-pager .number {
		color: #FFFFFF !important;
		border-radius: 5px !important;
		margin: 0px 5px !important;
	}

	.block .btn-next,
	.block .btn-prev {
		padding: 0px 0px !important;
		border-radius: 5px !important;
	}

	.el-form {
		width: 70% !important;
	}

	.span {
		background-color: #E7FAF0;
		color: #44D886;
		padding: 0px 5px;
		margin-left: 3px;
		border: 1px solid #D0F5E0;
		border-radius: 5px;
		font-size: 12px;
	}
</style>
